<template>
  <draggable :list="form" :animation="340" tag="el-row" group="form" :sort="true">
    <template #item="{ element }">
      <el-col :span="element.props.span" @click="props.choose(element)">
        <el-card class="dra-card" style="cursor: pointer">
          <div>
            <div style="float: left">
              <span style="color: red">{{ element.valite ? '*' : ' ' }}</span>
              <el-icon :size="14">
                <component :is="element.icon" />
              </el-icon>
              <span>{{ element.title }}</span>
            </div>
            <div style="float: right">
              <el-icon @click="componentOperate(element, 'copy')">1</el-icon>
              <el-icon @click="componentOperate(element, 'delete')">2</el-icon>
            </div>
          </div>
          <component :obj="element" :is="element.type" :key="element.field"></component>
        </el-card>
      </el-col>
    </template>
  </draggable>
</template>

<script lang="ts">
export default {
  name: 'formComponent'
}
</script>
<script lang="ts" setup>
import { toRefs, defineProps } from 'vue'
import draggable from 'vuedraggable'
import { type Basis, type prop } from '@/types/element'

const props = withDefaults(defineProps<prop>(), {
  element: Object,
  activeId: String,
  form: Array, // 表单数据
  copy: Function, // 复制事件
  delete: Function, // 删除事件
  choose: Function // 选中事件
})

const { form } = toRefs(props)

// 注册事件
const componentOperate = (element: Basis, type: string) => {
  if (type === 'copy') {
    console.log(element, form?.value, type)
    props.copy(form.value, element)
  } else if (type === 'delete') {
    props.delete(form.value, element.field)
  }
}
</script>
<style lang="scss" scoped>
.el-row {
  width: 100%;
}
.dra-card {
  margin: 10px;
  border-radius: 16px;
}
</style>
